<html>
    <head>
        <script type='text/javascript' src='js/jquery.js'></script>
        <link rel="stylesheet" type="text/css" href="stylesheets/main.css" />
        <style type="text/css">

body {font-size : 100%}
div.epilogue {
	z-index: 5;
	font-family : {"Arial", sans-serif}
	font-style:italic;
	font-size:2em;
    background-image:url('image/scene_1.3.png');
    background-repeat:no-repeat;
    padding: 60px;
    border: 1px;
    border-style: solid;
    background-color: #000000;
    text-shadow: 2px 2px 2px #888888;
    position:absolute;
    left:80px;
    margin-left: 40px;
    margin-right: 40px;
    height: 400px;
    width: 70%;
    top: -500px;
    overflow: hidden;
}

div.inline {
	position: relative;
	float: right;
	margin-right: 80px;
}

div.spacer {
    clear: both;
}

        </style>
  </head>
  <body>
    <script>
    	var score = {{ score }}, credits = {{ credits }}, newmissionslist = {{ newmissions }};
    	
    	var scorecounting = function (i) {
    		i++
    		$("#scorecounter").html(i);
    		if (i<score) setTimeout(scorecounting(i),50);
    	}
    	
    	var creditcounting = function (i) {
    		i++
    		$("#creditcounter").html(i);
    		if (i<credits) setTimeout(scorecounting(i),50);
    	}
    	
    	var newmissions = function (i) {
    		m = $("#creditcounter").html+"<br>"+newmissions[i].title
    		$("#creditcounter").html(m);
    		i++;
    		if (newmissionslist.length>i) setTimeout(newmissions(i),750);
    	}

     	var newtech = function (i) { }
 

    	var initialize = function () {
      		$("#epilogue").animate({top: "80px"}, 500);
        	if (score>0) setTimeout(scorecounting(0), 4000);
        	if (credits>0) setTimeout(creditcounting(0), 5000);
        	if (newmissionslist.length>0) setTimeout(newmissions(0),6000);
        	setTimeout(newtech(0), 8000);
        }
       
      setTimeout(initialize, 100);
    </script>
  <body>
    <div class="epilogue" id="epilogue">
    	<center>{{ mission_result }}</center>
    	<div id="spoils">
    		Score:<div class="inline" id="scorecounter">0</div><br>
    		Credits:<div class="inline" id="creditcounter">0</div><br>
    		New Missions:<div class="inline" id="newmissions"></div><br>
    		New tech:<div class="inline" id="newtech"></div><br>
    	</div>
		<div class="button orange" style="width: 160px; font-size: .5em; margin: auto; text-align:center;" onClick="javascript:window.location='\\';">Return to Lobby</div>
    </div>
  </body>
</html>